<template>
  <div style="min-width: 700px">
    <jxf-titletip :title="title" :hasRefresh="false" :hasGoBack="true" @goBack="$emit('goBack')"></jxf-titletip>
    <div class="main">
      <div class="blankContent"></div>
      <el-form :model="announcementInfo" ref="announcementInfo" class="announcement" label-width="160px" :rules="rules">
        <!-- 基本信息 -->
        <div class="basicInfo">
          <i>基本信息</i>
          <el-form-item prop="name" required label="公告标题：">
            <el-input v-model="announcementInfo.name" placeholder="请输入标题" maxlength="20" clearable></el-input>
          </el-form-item>
          <el-form-item prop="terminal" required label="展示对象：">
            <el-select v-model="announcementInfo.terminal" clearable placeholder="请选择">
              <el-option label="全部" value="0"></el-option>
              <el-option label="买家端" value="1"></el-option>
              <el-option label="卖家端" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="title" label="显示设置：">
            <el-switch
              v-model="announcementInfo.isShow"
              active-color="#13ce66"
              inactive-color="#f2f2f2">
            </el-switch>
          </el-form-item>
          <el-form-item label="公告展示时间段：" required>
            <el-row>
              <el-col :span="11">
                <el-date-picker
                  v-model="announcementInfo.startTime"
                  type="datetime"
                  placeholder="选择开始时间"
                  :picker-options="startTimeOption"
                  value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </el-col>
              <el-col :span="2">
                -
              </el-col>
              <el-col :span="11">
                <el-date-picker
                  v-model="announcementInfo.endTime"
                  type="datetime"
                  placeholder="选择结束时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="endTimeOption">
                </el-date-picker>
              </el-col>
            </el-row>
          </el-form-item>
        </div>
        <!-- 公告正文 -->
        <div class="announcementContent">
          <i>公告正文</i>
          <el-form-item label="公告正文：" prop="content" required>
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 6}"
              placeholder="请输入内容"
              v-model="announcementInfo.content"
              maxLength="30">
            </el-input>
          </el-form-item>
          <el-form-item>
            <div class="btnGroup">
              <el-button type="primary" @click="submitForm">提交</el-button>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Announcement",
        props: {
          isShowAnnouncement: {
            type: Boolean,
            default: true
          },
          dataInfo: {
            type: Object,
            default: () => {}
          },
          title: {
            type: String,
            default: '发布公告'
          }
        },
        data() {
          return {
            startTimeOption: {
              disabledDate: time => {
                return time.getTime() < (Date.now() -  8.64e7) || this.announcementInfo.endTime ?  new Date(this.announcementInfo.endTime).getTime() - 8.64e7 < time.getTime() : false
              }
            },
            endTimeOption: {
              disabledDate: time => {
                if(this.announcementInfo.startTime) {
                  return new Date(this.announcementInfo.startTime).getTime() > time.getTime()
                } else {
                  return time.getTime() < (Date.now() - 8.64e7)
                }
              }
            },
            rules: {
              name: [
                { required: true, message: '公告标题不能为空', trigger: ['change', 'blur'] },
              ],
              terminal: [
                { required: true, message: '展示对象不能为空', trigger: ['change', 'blur'] },
              ],
              content: [
                { required: true, message: '展示对象不能为空', trigger: ['change', 'blur'] },
              ]
            },
            dateType: {
              type:"date",
              format: "yyyy 年 MM 月 dd 日 HH 时 mm 分 ss秒",
              valueFormat: "yyyy-MM-dd HH:mm:ss"
            },
            announcementInfo: this.dataInfo,
            isTip: false,
            editorContent: ""
          }
        },
        methods: {
          resetForm() {
              this.$refs['announcementInfo'].resetFields()
          },

          submitForm() {
            this.$refs['announcementInfo'].validate((valid) => {
              if (valid) {
                let data = {
                  ...this.announcementInfo,
                  isShow: this.announcementInfo.isShow ? '1' : '0'
                };
                ajax.post(apis.operate.operateNotice, data).then(result => {
                  if(result.code === '10000000') {
                    this.$message({
                      type: 'success',
                      message: '新增公告成功!'
                    });
                    this.resetForm();
                    this.$emit('fresh');
                    this.$emit('goBack')
                  } else {
                    this.$message.error(result.message)
                  }
                })
              }
            })
          }
        },
        watch: {
          dataInfo() {
            this.announcementInfo = this.dataInfo
          }
        }
    }
</script>

<style lang="scss" scoped>
  .numtip {
    padding: 10px 0;
    font-size: 12px;
    color: red;
  }
 .main {
   display: flex;
   min-width: 1000px;
   min-height: 800px;
   justify-content: flex-start;
   .blankContent {
     width: 16%;
     min-width: 200px;
   }
   .announcement {
     padding: 40px 0 0 150px;
     margin-top: 20px;
     width: 84%;
     min-width: 500px;
     border-radius: 4px;
     background: #fff;
     box-sizing: border-box;
     .el-input {
       width: 90%;
       max-width: 400px;
     }
     .basicInfo {
       position: relative;
       width: 640px;
       i {
         position: absolute;
         left: -280px;
         padding: 5px 0 5px 20px;
         display: block;
         width: 180px;
         height: 40px;
         line-height: 40px;
         color: #fff;
         font-style: normal;
         background: #9ea7b4;
       }
       i:after {
         background-color: transparent;
         content: "";
         position: absolute;
         top: 0;
         right: -50px;
         border: 25px solid;
         border-color: transparent transparent transparent #9ea7b4;
       }
     }
     .announcementContent {
       position: relative;
       top: 20px;
       i {
         position: absolute;
         left: -280px;
         padding: 5px 0 5px 20px;
         display: block;
         width: 180px;
         height: 40px;
         line-height: 40px;
         color: #fff;
         font-style: normal;
         background: #9ea7b4;
       }
       i:after {
         background-color: transparent;
         content: "";
         position: absolute;
         top: 0;
         right: -50px;
         border: 25px solid;
         border-color: transparent transparent transparent #9ea7b4;
       }
       #editorElem {

       }
       .btnGroup {
         margin-top: 20px;
         .el-button {
           padding: 12px 40px;
         }
       }
     }
   }
 }
</style>
